<!DOCTYPE html>
<html >

<head>

  <title>Yuan | City</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
  <link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
  <link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
  <link rel="stylesheet" href="../css/nice-select.css" type="text/css">
  <link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
  <link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
  <link rel="stylesheet" href="../css/style.css" type="text/css">
  <link rel="stylesheet" href="../css/susu.css" type="text/css">
<!--  注册-->
  <link rel="stylesheet" href="../css/register.css">
<!--  <link rel="stylesheet" href="../css/font_43459_lbtux0zjkr6yldi.css">-->

  <!-- Js Plugins -->
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/jquery-ui.min.js"></script>
  <script src="../js/jquery.countdown.min.js"></script>
  <script src="../js/jquery.nice-select.min.js"></script>
  <script src="../js/jquery.zoom.min.js"></script>
  <script src="../js/jquery.dd.min.js"></script>
  <script src="../js/jquery.slicknav.js"></script>
  <script src="../js/owl.carousel.min.js"></script>

</head>

<body>
<!-- Page Preloder -->
<!--    <div id="preloder">-->
<!--        <div class="loader"></div>-->
<!--    </div>-->

<!--头部引入-->
<div class="su_head ">
</div>

<br />

<div id="main" class="main-warp">
  <div class="main-content">
    <div class="formDiv">
      <h2 class="title text-center">注册</h2>

      <form id="registerForm" role="form" class="form-horizontal "  >
        <div class="form-item">
          <div class="input-warp">
            <span class="input-icon iconfont icon-yonghu1"></span><input id="userName" name="userName" placeholder="账号" type="text" class="inputs" value="">
          </div>
          <p id="userNameErr" class="errMsg"></p>
        </div>
        <div class="form-item">
          <div class="input-warp">
            <span class="input-icon iconfont icon-baomi"></span>
            <input id="pwd" type="password" placeholder="至少6位字母或数字" maxlength="20" name="password" value="" class="inputs">
          </div>
          <p id="passwordErr" class="errMsg"></p>
        </div>
        <div class="form-item">
          <div class="input-warp">
            <span class="input-icon iconfont icon-baomi"></span>
            <input id="repwd" type="password" placeholder="至少6位字母或数字" maxlength="20" name="password2" value="" class="inputs" onkeyup="checkpassword()">
          </div>
          <p id="passwordErr2" class="errMsg"></p>
        </div>
        <div class="form-item">
          <div class="input-warp">
            <span class="input-icon iconfont icon-youxiangbangding"></span>
            <input id="email" name="email" placeholder="邮箱地址" type="text" class="inputs" value="">
          </div>
          <p id="emailErr" class="errMsg"></p>
        </div>
        <div class="form-item">
          <div class="input-warp s">
            <span class="input-icon iconfont icon-yanzhengma"></span>
            <input id="kaptcha" name="kaptcha" placeholder="验证码" type="text" class="inputs" value="">
            <div id="popup-captcha" style="display: none"></div>
          </div>

          <div class="pull-right">
            <button id="btnSendCode" class="btn lgbtn blue" type="button" onclick="sendEmail()">获取验证码</button>
          </div>
          <p id="kaptchaErr" class="errMsg"></p>
        </div>
        <div class="btn-warp">
          <div class="text-center">
            <button type="button" id="btnSubmit" class="btn lgbtn blue btn-block">注册</button>
          </div>
        </div>
        <div class="agreement gap">
          <div class="text-right">
            <div class="pull-left">已有账号，<a href="login.html" class="link">登录</a>
            </div><p style="font-size: 13px;
            line-height: 19px;
            font-family: 'Muli', sans-serif;
            color: #636363;
            font-weight: 400;">注册即代表您已阅读并同意《<a href="#" >使用协议</a>》</p>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- Footer Section Begin -->
  <footer class="footer-section" style="margin-top: 90px">
    <div class="copyright-reserved container">
      <div class="row">
        <div class="col-lg-12">
          <div class="copyright-text" style="text-align: center;">
            Copyright &copy;<script>document.write(new Date().getFullYear());</script> Yuan City
          </div>
        </div>

      </div>
    </div>
  </footer>
  <!-- Footer Section End -->

</div>




<script type="text/javascript">


  //调用公共头部
  $('.su_head').load('head.html');
  //获取导航栏信息
  $(document).ready(function (){
    $.ajax({
      type: 'get',
      url: '/ayuancity/categorys/getcategoryAndtype',
      success: function (res) {
        // console.log( $('.su_nav').text())
        for (let i=0;i<res.content.data.length;i++) {

          let nav = res.content.data[i];
          var category =
                  `
							<li id="${nav.categoryName}">
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
          var drop='';
          var type='';
          if (nav.types.length > 0) {
            drop =  ` <ul class="dropdown "  >`
            for (let j = 0; j < nav.types.length; j++) {
              type = type+ `<li ><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

            }
            type=type+ `</ul>`
          }
          var template= category+ drop+type+ ` </li>`;
          $('.su_nav').append(template);

        }
        // console.log($('.su_head').text());
      }

    });

    //注册
    $('#btnSubmit').click(function () {
      $.ajax({
        type: 'post',
        url: '/ayuancity/users/registerUser',
        data: {
          userAccount: $('#userName').val(),
          userPassword: $('#pwd').val(),
          email: $('#email').val(),
          kaptcha: $('#kaptcha').val()
        },
        success: function (json) {
          console.log(json)
          if (json.success) {
            alert("注册成功")
            location.href = 'login.html';
          } else {
            alert(json.message);
            location.href = 'register.html';
          }
        }
      });
    });
  })
//验证密码是否一致
  function checkpassword() {
    var password = document.getElementById("pwd").value;
    var repassword = document.getElementById("repwd").value;

    if(password!='' && password != repassword) {
      document.getElementById("passwordErr2").innerHTML="两次密码输入一致";
    }else {
      document.getElementById("passwordErr2").innerHTML=""
    }
  }



  //获取邮箱验证
function sendEmail() {

  let mail= $('#email').val()
   if (mail.indexOf('@qq.com')==-1){
     $('#emailErr').html("请输入正确的QQ邮箱")
   } else{
     $.ajax({
       type: 'get',
       url: '/city/v1/SendEmail',
       data: {
         userEmail: mail
       },
       success: function (res) {
           console.log(res)
       }
   })

 }
  }


</script>




<script src="../js/main.js"></script>


</body>

</html>